<template>
  <view>
    <div class="title-box">
      <div>您好</div>
      <div>欢迎使用</div>
    </div>
    <view class="bottom-box">
      <div class="fontchange">手机号</div>
      <div>
        <up-input
          placeholder="请输入您的手机号"
          border="bottom"
          v-model="from.phone"></up-input>
      </div>
      <div style="margin-top: 30rpx" class="fontchange">密码</div>
      <div>
        <up-input
          placeholder="请输入您的密码"
          border="bottom"
          type="password"
          v-model="from.pass"></up-input>
      </div>
      <div
        style="margin-top: 30rpx; font-size: 28rpx; color: rgb(153, 153, 153)"
        @click="changetype"
        v-show="settings == 1 ? true : false">
        还没有账号，去注册?
      </div>
      <div
        style="margin-top: 30rpx; font-size: 28rpx; color: rgb(153, 153, 153)"
        @click="changetype"
        v-show="settings != 1 ? true : false">
        已有账号去登录?
      </div>
      <div
        class="btn-box"
        @click="longin"
        v-show="settings == 1 ? true : false">
        登录
      </div>
      <div class="btn-box" @click="add" v-show="settings != 1 ? true : false">
        注册
      </div>
    </view>
  </view>
</template>
<script setup>
import { postLoginWxMinAPI } from '@/api/longin'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
const settings = ref(0)
const from = ref({
  phone: '15311111111',
  pass: '123456'
})
// 登录
const longin = async () => {
  const res = await postLoginWxMinAPI(from.value)
  uni.setStorageSync('token', res.result.token)
  uni.setStorageSync('storeId', res.result.storeId)
  loginSuccess(res.result)
  // uni.navigateTo({
  //   url: '/pages/longinsucc/index'
  // })
}
// 登录成功
const loginSuccess = (profile) => {
  // 保存会员信息
  memberStore.setProfile(profile)
  // 成功提示
  uni.showToast({ icon: 'success', title: '登录成功' })
  uni.navigateTo({
    url: '/pages/longinsucc/index'
  })
}
// 注册
const add = () => {
  uni.showToast({
    title: '注册成功',
    icon: 'success',
    duration: 2000
  })
}
const changetype = () => {
  settings.value = settings.value == 0 ? 1 : 0
}
</script>
<style>
page {
  background-image: url('https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/a3572d22-6050-44e9-8fb3-c6ce96430553.jpg');
  background-size: cover;
}

.title-box {
  font-size: 48rpx;
  margin-top: 195rpx;
  margin-left: 50rpx;
  color: rgb(255, 255, 255);
}

.bottom-box {
  width: 750rpx;
  height: 850rpx;
  border-radius: 60rpx 60rpx 0rpx 0rpx;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  bottom: 0;
  padding: 60rpx;
}

.u-form-item__body__left__content__label.data-v-b4fd400b {
  width: 120rpx;
  font-size: 32rpx !important;
}

.fontchange {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
}

.btn-box {
  width: 550rpx;
  height: 84rpx;
  border-radius: 42rpx;
  background: rgba(255, 99, 6, 1);
  text-align: center;
  line-height: 84rpx;
  margin: 100rpx auto;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
}
</style>
